<template>
    <div class="login_container">
        <div class="login_box">
             <!--头像区域  -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 登录表单区，表单绑定数据在form处:model绑定一个对象，后续form-item再绑定对象里的key-->
            <el-form  label-width="0px" class="login_form" 
            :model="form" 
            :rules="loginFormRules"
            ref="loginFormRef">
                <!-- 用户名 -->
                <el-form-item prop="username"> 
                    <el-input placeholder="账号" prefix-icon="iconfont icon-user" v-model="form.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input placeholder="密码" prefix-icon="iconfont icon-3702mima" v-model="form.password"
                    show-password></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="loginValidate">登录</el-button>
                    <el-button type="info" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
    name:'Login',
    data() {
        return {
            // 登录表单的数据绑定对象
            form:{
                username:'',
                password:''
            },
            // 表单验证
            loginFormRules:{
                // 验证用户名是否合法，trigger:blur失去焦点时触发提醒
                username:[
                    {required: true, message: '请输入账号', trigger: 'blur'}, 
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}    
                ],
                // 验证密码
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        // 重置input
        resetForm(){
            this.$refs['loginFormRef'].resetFields()
        },
        // 登录预校验，验证逻辑就是和input框里设定的loginFormRules一致
        loginValidate(){
            this.$refs['loginFormRef'].validate(async(valid,)=>{
                // 第一个参数valid是验证成功与否，是个布尔值；
                if(!valid) return; //如果valid为false则return一个空
                // 如果true则发起Ajax请求
                // 请求方式，以及怎么请求都在后端接口文档里，因为我们配置了baseUrl，所以直接写/后的路径。this.form是需要的参数———账号和密码
                const {data:result}=await this.$http.post('login',this.form) //返回的是一个Promise，用一下async和await得到一个对象，里面的data属性是需要的，解构赋值一下！
                console.log(result)
                if (result.meta['status'] !== 200) {
                    // return console.log('登录失败')
                    this.$message.error('登录失败，请检查账号及密码是否正确')
                }else{
                    // return console.log('登录成功')
                    this.$message({message:'登录成功',type:'success'})

                    // 1、将登录之后的token保存到sessionStorage中
                    //      1.1 项目中其他接口必须在登录之后才能访问
                    //      1.2 token只因在当前打开的浏览器窗口生效，因此放在sessionStorage而不是localStorage
                    // 2、通过编程式路由导航跳转到后台主页，路由地址/home
                    window.sessionStorage.setItem('token',result.data.token)

                    this.$router.push({path:'/home'})
                }
            })
        }
    }
}
</script>

<style lang='less' scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}

.login_box{
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 5px;
    /* 绝对定位，盒模型 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.avatar_box{
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 5px 5px 5px #ddd;
    position: absolute;
    left: 50%; 
    transform: translate(-50%,-50%); //这个移动距离根据盒子本身的尺寸移动，高度130px，宽130px，移动-50%就是向左，向上移65px
    background-color: white;
    img{
        width: 100%;
        height:100%;
        border-radius: 50%;
        background-color: #eee;
    }
}
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btns{
    display: flex;
    justify-content: flex-end;
}
</style>